<template>
    <div>
      <el-container>
        <el-main>
          <el-card>
            <div class="wj">
              问卷名称 : <el-input class="wjname" v-model="addwj.name"></el-input>
              <el-button>确定</el-button>
            </div>
            <el-card>
              问卷介绍词
              <el-input type="textarea" v-model="addwj.desc"></el-input>
            </el-card>
            <div class="st" v-for="(item, index) in stlist" :key="index">
              <div class="st_top">
                <p class="tl">{{ item.title }}</p>
                <p class="tr">
                  <i class="el-icon-edit"></i>
                  <i class="el-icon-share"></i>
                  <i class="el-icon-delete"></i>
                  <i
                    class="el-icon-bottom"
                    v-if="item.sort_flag == 2"
                    @click="upHandle(item._id)"
                  ></i>
                  <i class="el-icon-top" v-else @click="downHandle(item._id)"></i>
                </p>
              </div>
              <div class="st_btm">
                <el-input
                  v-if="item.xuanxiang.length < 4"
                  type="textarea"
                ></el-input>
                <div v-else>
                  <el-radio-group v-model="radio">
                    <el-radio
                      v-for="(item1, index1) in item.xuanxiang"
                      :key="index1"
                      :label="item1"
                    ></el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-card>
        </el-main>
        <el-aside width="200px">
          <div @click="dxHandle">单选</div>
          <div @click="jdHandle">简答</div>
          <div>多选</div>
        </el-aside>
      </el-container>
  
      <!-- 单选对话框 -->
      <el-dialog title="单选题" :visible.sync="dx_dialogFormVisible">
        <el-form :model="addst">
          <el-form-item label="题目描述" :label-width="formLabelWidth">
            <el-input v-model="addst.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单选选项" :label-width="formLabelWidth">
            <br />
            <el-input placeholder="请输入选项内容" v-model="x1"></el-input><br />
            <el-input placeholder="请输入选项内容" v-model="x2"></el-input><br />
            <el-input placeholder="请输入选项内容" v-model="x3"></el-input><br />
            <el-input placeholder="请输入选项内容" v-model="x4"></el-input><br />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dx_dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addHandle">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 简答对话框 -->
      <el-dialog title="简答题" :visible.sync="jd_dialogFormVisible">
        <el-form :model="addst">
          <el-form-item label="题目描述" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="addst.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="jd_dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addjdHandle">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      this.getstlist()
    },
    methods: {
      async upHandle(_id) {
        console.log(_id)
        await this.axios.post("/wj/up", { _id })
        //   await this.axios.post("/wj/down", { _id })
        this.getstlist()
      },
      async downHandle(_id) {},
      async getstlist() {
        let {
          data: { stlist },
        } = await this.axios.get("/wj/stlist")
        this.stlist = stlist
      },
      async dxHandle() {
        //添加当前问卷信息
        let {
          data: { wj_id },
        } = await this.axios.post("/wj/addwj", this.addwj)
  
        this.addst.wj_id = wj_id
        this.dx_dialogFormVisible = true
        this.addst.st_type = "单选"
        this.addst.sort_flag = 1
      },
      async jdHandle() {
        //添加当前问卷信息
        let {
          data: { wj_id },
        } = await this.axios.post("/wj/addwj", this.addwj)
        this.addst.wj_id = wj_id
        this.jd_dialogFormVisible = true
        this.addst.st_type = "简答"
        this.addst.sort_flag = 2
      },
      async addHandle() {
        this.dx_dialogFormVisible = false
        //添加试题
        this.addst.xuanxiang.push(this.x1, this.x2, this.x3, this.x4)
        console.log(this.addst)
        let { code, msg } = await this.axios.post("/wj/addst", this.addst)
        if (code === 200) {
          this.$message.success(msg)
        }
      },
      async addjdHandle() {
        this.jd_dialogFormVisible = false
        //添加试题
        console.log(this.addst)
        this.addst.xuanxiang.push("简答题")
        let { code, msg } = await this.axios.post("/wj/addst", this.addst)
        if (code === 200) {
          this.$message.success(msg)
        }
      },
    },
    data() {
      return {
        stlist: [],
        dx_dialogFormVisible: false,
        jd_dialogFormVisible: false,
        formLabelWidth: "130",
        radio: true,
        dxform: {
          name: "",
        },
        addwj: {
          name: "",
          desc: "",
        },
        addst: {
          title: "",
          xuanxiang: [],
          st_type: "",
          sort_flag: 0,
          wj_id: "",
        },
        x1: "",
        x2: "",
        x3: "",
        x4: "",
      }
    },
  }
  </script>
  
  <style>
  .el-radio {
    display: block !important;
    line-height: 30px !important;
  }
  .st_top {
    display: flex;
    justify-content: space-between;
  }
  .wjname {
    width: 200px !important;
    margin-right: 10px !important;
  }
  .wj {
    margin-bottom: 30px;
  }
  .st {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-top: 10px;
  }
  </style>